import React, {Fragment} from 'react'
import PropTypes from 'prop-types'
import {Badge, Button, Col, Icon, Row, Table} from 'antd'
import {toBadge, toText} from 'services/order'
import classnames from 'classnames'
import {randomColor} from 'config'
import {DropOption} from 'components'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const List = ({
                onDeleteItem, onLeaveItem, onEditItem, isMotion, location, ...tableProps
              }) => {

  const columns = [
    {
      title: '订单编号',
      dataIndex: 'sn',
      key: 'sn',
    }, {
      title: '订单总金额',
      dataIndex: 'totalAmount',
      key: 'totalAmount',
      render: (val) => val ? val + '元' : '-',
    }, {
      title: '代收金额',
      dataIndex: 'realityPayAmount',
      key: 'realityPayAmount',
      render: (val) => val + '元',
      width: 150,
    }, {
      title: '复购订单',
      dataIndex: 'isBuyBack',
      key: 'reorder',
      width: 100,
      render: val => val ? '是' : '否',
    }, {
      title: '产品信息',
      dataIndex: 'goodsInfo',
      key: 'goodsInfo',
    }, {
      title: '下单时间',
      dataIndex: 'ctime',
      key: 'ctime',
    }, {
      title: '快递公司',
      dataIndex: 'expressTypeName',
      key: 'expressTypeName',
    }, {
      title: '所属部门',
      dataIndex: 'belongDeptName',
      key: 'belongDeptName',
    }, {
      title: '下单员工',
      dataIndex: 'employee',
      key: 'employee.username',
      render: emp => emp ? emp.realname + '(' + emp.username + ')' : "-",
    }, {
      title: '内部备注',
      dataIndex: 'empRemark',
      key: 'empemark',
    }, {
      title: '预付金额',
      dataIndex: 'preAmount',
      key: 'preAmount',
      render: (val) => val ? val + '元' : '-',
    }, {
      title: '订单状态',
      dataIndex: 'status',
      key: 'status',
      render: (val) => <Badge status={toBadge(val)} text={toText(val)} />,
    }, {
      title: '要求发货时间',
      dataIndex: 'requireSendTime',
      key: 'requireSendTime',
    }, {
      title: '客户备注',
      dataIndex: 'customerRemark',
      key: 'customerRemark',
    }, {
      title: '收货人',
      dataIndex: 'address',
      key: 'address.receiver',
      render: address => address ? address.receiver : "-",
    }, {
      title: '收货电话',
      dataIndex: 'address',
      key: 'address.dmobile',
      render: address => address ? address.dmobile : "-",
    }, {
      title: '收货地址',
      dataIndex: 'addressInfo',
      key: 'addressInfo',
      render: address => address ? address : "-",
    }, {
      title: '归属微信号',
      dataIndex: 'wxId',
      key: 'wxId',
    }, {
      title: '客户微信号',
      dataIndex: 'customerWxId',
      key: 'customerWxId',
    }, {
      title: '发货仓库',
      dataIndex: 'depotName',
      key: 'depotName',
    }, {
      title: '预付方式',
      dataIndex: 'prepayTypeName',
      key: 'prepayTypeName',
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Fragment>
      {/*<Row gutter={24}>*/}
        {/*<Col xl={{ span: 24 }} md={{ span: 24 }} sm={{ span: 24 }}>*/}
          {/*<div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', float: 'right', marginBottom: 12 }}>*/}
            {/*<div>*/}
              {/*<Button className="margin-right" type="primary">导出查询全部</Button>*/}
              {/*<a href="javascript:alert('下载模板');" target="_blank">*/}
                {/*<Button className="margin-right"><Icon type="cloud-download-o" />导出今日全部</Button>*/}
              {/*</a>*/}
              {/*<a href="javascript:alert('运营号导出');" target="_blank">*/}
                {/*<Button className="margin-right"><Icon type="cloud-download-o" />导出</Button>*/}
              {/*</a>*/}
            {/*</div>*/}
          {/*</div>*/}
        {/*</Col>*/}
      {/*</Row>*/}
      <Table
        {...tableProps}
        className={classnames(styles.table, {[styles.motion]: isMotion})}
        scroll={{x: 3000}}
        columns={columns}
        simple
        rowKey={record => record.id}
        components={{
          body: {wrapper: isMotion ? AnimateBody : CommonBody},
        }}
      />
    </Fragment>
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
